<template>
  <div class="dbj">
    <div class="box">
      <div class="name">山西工商学院网格化信息管理系统</div>
      <div class="mainleft fl">
        <div></div>
      </div>
      <div class="mainright fr">
        <div class="fdiv">
          <span>用户登录</span>
          <div class="loginbox">
            <el-form ref="loginBody" :model="loginBody" label-width="80px">
              <el-form-item prop="username">
                <el-input
                  prefix-icon="el-icon-user"
                  v-model="loginBody.username"
                  placeholder="请输入工号"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item prop="  password">
                <el-input
                  prefix-icon="el-icon-lock"
                  show-password
                  v-model="loginBody.password"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item class="el3" prop="yzm">
                <el-input
                  v-model="loginBody.yzm"
                  placeholder="请输入验证码"
                  clearable
                >
                </el-input>
                <i
                  class="iconfont icon-yanzhengma"
                  style="
                    color: #d5d9de;
                    font-size: 20px;
                    position: absolute;
                    left: 15px;
                    top: 6px;
                  "
                >
                </i>
                <img
                  :src="yzmimg"
                  alt=""
                  style="
                    border: 1px solid #c0c4cc;
                    width: 80px;
                    position: absolute;
                    right: 15px;
                    top: 6px;
                    height: 37px;
                  "
                />
              </el-form-item>

              <el-form-item class="el4">
                <el-checkbox class="jzzz fl" v-model="checked"
                  >记住账号</el-checkbox
                >
                <div class="wjmm fr">忘记密码?</div>
              </el-form-item>
              <el-form-item>
                <el-button @click="userlogin" type="primary">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 数据接口
import axios from 'axios'

import ajax from "../api/ajax.js";
export default {
  data() {
    return {
      //验证码
      yzmimg: require("../assets/img/yanzhengma.png"),
      loginBody: {
        code: "",
        username: "",
        password: "",
        uuid: "",
      },
      checked: "",
    };
  },

  methods: {
    userlogin() {
      // this.$router.push("/home");
      // if (this.loginBody.username == "" || this.loginBody.password == "") {
      //   this.$message.info({
      //     message: "请输入账号和密码",
      //     duration: 3000,
      //     showClose: true,
      //   });
      // } else {
      //   this.getlogin();
      // }
      this.$refs.loginBody.validate(async (valid) => {
        if (!valid) return;
        const result = await ajax("login", this.loginBody, "post");
        console.log(result);
        if (result.code == 200) {
          this.$message.success("登录成功");
          //1.登陆成功之后token,保存到客户端的 sessionStorage 中
          // 1.1项目中出了登录之外的其他API接口，必须登录之后才能访问
          //1.2 id 只有在当前网站打开期间生效，所以id 保存在sessionStorage中
          window.sessionStorage.setItem("token", result.token);
          //2.通过编程式导航跳转到后台主页，路由地址是/home
          this.$router.push("/home"); // this.$router是编程式导航对象
        } else {
          this.$message.error("登录失败");
        }
      });
    },
    //登录
  },
};
</script>

<style lang="less" scoped>
.dbj {
  height: 100%;
  width: 100%;
  background: url("../assets/img/loginbcg@2x.png");
  background-size: cover;
  background-position: center;
  -webkit-background-size: cover; /* 兼容Webkit内核浏览器如Chrome和Safari */
  -o-background-size: cover; /* 兼容Opera */
}
.box {
  width: 1274px;
  height: 765px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.name {
  text-align: center;
  font-size: 54px;
  height: 80px;
  line-height: 80px;
  font-weight: 600;
  color: #fff;
  font-family: cursive;
}
.mainleft,
.mainright {
  position: relative;
  margin-top: 50px;
  //   box-shadow: 0px 0px 10px 4px #003a8c;
  height: 80%;
  width: 50%;
}
.mainleft {
  background-color: rgb(6, 77, 180);
  border-radius: 28px 0px 0px 28px;
  div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 315px;
    height: 313px;
    background-image: url("../assets/img/编组@2x.png");
    background-size: 100% 100%;
  }
}
.mainright {
  background: #fff;
  border-radius: 0px 28px 28px 0px;
}
.fdiv {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 379px;
  height: 441px;
  span {
    display: block;
    width: 100%;
    height: 10%;
    color: #064db4;
    font-size: 31px;
    font-weight: 600;
    text-align: center;
    line-height: 44px;
    font-family: PingFang Medium;
  }
}
.loginbox {
  display: flex;
  width: 100%;
  height: 347px;
  position: absolute;
  bottom: 0;
  .el-form {
    width: 100%;
  }
}
.wjmm {
  font-size: 16px;
  font-weight: 600;
  font-family: PingFang Medium;
  cursor: pointer;
  color: #064db4;
}
.el3 {
  margin-bottom: 0;
}
.el4 {
  margin-bottom: 40px;
}
</style>